<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域资源共享 (CORS) 完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .code-block {
            background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
            border-radius: 12px;
            overflow: hidden;
        }
        .code-header {
            background: rgba(255,255,255,0.05);
            padding: 8px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-size: 14px;
            color: #a0a0b0;
        }
        pre {
            margin: 0;
            padding: 20px;
            overflow-x: auto;
        }
        pre code {
            color: #e0e0e0;
            font-size: 14px;
            line-height: 1.6;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .section-divider {
            height: 2px;
            background: linear-gradient(to right, transparent, #e0e0e0, transparent);
            margin: 3rem 0;
        }
        ::selection {
            background: #667eea;
            color: white;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-600 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="max-w-4xl mx-auto text-center">
                <div class="floating-icon inline-block mb-6">
                    <i class="fas fa-globe-americas text-6xl opacity-80"></i>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-font">
                    跨域资源共享 (CORS)
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">
                    深入理解Web开发中的跨域问题与解决方案
                </p>
                <div class="flex justify-center space-x-4">
                    <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS" target="_blank" class="inline-flex items-center px-6 py-3 bg-white text-purple-600 rounded-full font-medium hover:bg-gray-100 transition">
                        <i class="fas fa-book-open mr-2"></i>
                        MDN官方文档
                    </a>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#F9FAFB"/>
            </svg>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-12">
        <!-- Introduction Section -->
        <section class="max-w-4xl mx-auto mb-16">
            <div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
                <div class="flex items-center mb-6">
                    <i class="fas fa-info-circle text-3xl text-indigo-600 mr-4"></i>
                    <h2 class="text-3xl font-bold gradient-text">什么是跨域？</h2>
                </div>
                <p class="text-gray-700 leading-relaxed text-lg mb-6">
                    跨域资源共享（Cross-Origin Resource Sharing，CORS）是一种基于HTTP头的机制，它允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。
                </p>
                <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl p-6">
                    <p class="text-gray-800">
                        <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                        <strong>核心概念：</strong>当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域HTTP请求。
                    </p>
                </div>
            </div>
        </section>

        <!-- Visual Diagram -->
        <section class="max-w-6xl mx-auto mb-16">
            <div class="bg-white rounded-2xl shadow-lg p-8">
                <h2 class="text-3xl font-bold text-center mb-8 gradient-text">CORS 工作流程图</h2>
                <div class="mermaid">
                    graph LR
                        A[浏览器] -->|发起跨域请求| B[预检请求 OPTIONS]
                        B --> C{服务器检查}
                        C -->|允许| D[返回CORS头]
                        C -->|拒绝| E[返回错误]
                        D --> F[浏览器发送实际请求]
                        F --> G[服务器响应]
                        G --> H[浏览器接收数据]
                        
                        style A fill:#667eea,stroke:#fff,color:#fff
                        style H fill:#764ba2,stroke:#fff,color:#fff
                        style E fill:#f56565,stroke:#fff,color:#fff
                </div>
            </div>
        </section>

        <!-- Solutions Section -->
        <section class="max-w-6xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold gradient-text mb-4">跨域问题解决方案</h2>
                <p class="text-xl text-gray-600">多种技术栈的实现方式</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- Solution 1: JSONP -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-gradient-to-r from-orange-500 to-red-500 p-6 text-white">
                        <div class="flex items-center">
                            <i class="fas fa-code text-3xl mr-4"></i>
                            <h3 class="text-2xl font-bold">方案一：JSONP</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">利用 script 标签不受同源策略限制的特性，通过动态创建 script 标签来实现跨域请求。</p>
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
                            <p class="text-sm text-yellow-800">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                注意：JSONP 只支持 GET 请求，且存在安全风险
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Solution 2: Spring Boot -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-gradient-to-r from-green-500 to-teal-500 p-6 text-white">
                        <div class="flex items-center">
                            <i class="fas fa-leaf text-3xl mr-4"></i>
                            <h3 class="text-2xl font-bold">方案二：Spring Boot</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">Spring Boot 提供了多种配置 CORS 的方式，包括全局配置和注解配置。</p>
                        <div class="space-y-4">
                            <div class="code-block">
                                <div class="code-header">
                                    <i class="fas fa-file-code mr-2"></i>全局配置方式
                                </div>
                                <pre><code>@Configuration 
public class CorsConfig implements WebMvcConfigurer { 
    @Override 
    public void addCorsMappings(CorsRegistry registry) { 
        registry.addMapping("/**") 
                .allowedOrigins("*") 
                .allowCredentials(true) 
                .allowedMethods("GET", "POST", "DELETE", "PUT") 
                .maxAge(3600); 
    } 
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Solution 3: Filter -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-gradient-to-r from-blue-500 to-indigo-500 p-6 text-white">
                        <div class="flex items-center">
                            <i class="fas fa-filter text-3xl mr-4"></i>
                            <h3 class="text-2xl font-bold">方案三：原生 Filter</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">通过实现 Filter 接口，在响应头中添加 CORS 相关配置。</p>
                        <div class="code-block">
                            <div class="code-header">
                                <i class="fas fa-file-code mr-2"></i>SimpleCORSFilter.java
                            </div>
                            <pre><code>@Component
public class SimpleCORSFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, 
                        FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", 
                          "POST, GET, OPTIONS, DELETE, HEAD");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", 
                          "content-type, X-Requested-With");
        chain.doFilter(req, res);
    }
}</code></pre>
                        </div>
                    </div>
                </div>

                <!-- Solution 4: Gateway -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 text-white">
                        <div class="flex items-center">
                            <i class="fas fa-network-wired text-3xl mr-4"></i>
                            <h3 class="text-2xl font-bold">方案四：Gateway 网关</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">在微服务架构中，可以在网关层统一处理跨域问题。</p>
                        <div class="code-block">
                            <div class="code-header">
                                <i class="fas fa-file-code mr-2"></i>application.yml
                            </div>
                            <pre><code>spring:
  cloud:
    gateway:
      globalcors:
        add-to-simple-url-handler-mapping: true
        cors-configurations:
          '[/**]':
            allowedOrigins: "*"
            allowedMethods: "POST, GET, OPTIONS, DELETE, HEAD"
            allowedHeaders: "*"
            allowCredentials: true
            maxAge: 360000</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="section-divider"></div>

        <!-- Best Practices -->
        <section class="max-w-4xl mx-auto mb-16">
            <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
                <h2 class="text-3xl font-bold mb-6 flex items-center">
                    <i class="fas fa-shield-alt mr-4"></i>
                    最佳实践与安全建议
                </h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white bg-opacity-10 rounded-xl p-6">